<template>
    <div class="bepaid">
        <!-- 地址信息 -->
        <div class="order-box">
            <img  v-if="lang=='zh' " src="http://img.xianyufanshen.net//order/images/shouhuodizhixinxi@2x.png" alt="">
            <img  class="en" v-else src="http://img.xianyufanshen.net//image/jpg/engshouhuodizhixinxi_eng@2x.png" alt="">
            <dl>
                <dt>{{data.name}}    {{data.mobile}}</dt>
                <dd>{{data.province}}{{data.city}}{{data.district}}{{data.address}}</dd>
            </dl>
        </div>
        <!-- 填写快递信息 -->
        <div class="express">
            <img  v-if="lang=='zh' " src="http://img.xianyufanshen.net//order/images/tianxiekuaidixinxi@2x.png" alt="">
            <img class="en" v-else src="http://img.xianyufanshen.net//image/jpg/engtianxiekuaidixinxi_eng@2x.png" alt="">
            <p v-if="lang=='zh' "> 快递公司</p>
            <p v-else> Courier company</p>
            <!-- 快递公司 -->
            <div class="box" @click="show = true">
                <input v-if="lang=='zh' " v-model="company.com" readonly class="com" type="text" placeholder="请选择快递公司">
                <input v-else v-model="company.com" readonly class="com" type="text" placeholder="Please choose a courier company">
                <img class="arow" src="http://img.xianyufanshen.net//order/images/xiala_woyaofahuo@2x.png" alt="">
            </div>
            <p v-if="lang=='zh' ">快递单号</p>
            <p v-else>tracking number</p>
            <input v-if="lang=='zh' " class="com" type="number" v-model="number"  placeholder="请填写快递单号">
            <input v-else  class="com" type="number" v-model="number"  placeholder="Please fill in the courier number">
        </div>
        <!-- 底部提示 -->
        <div class="tip" v-if="lang=='zh' ">
            <i></i>请认真填写快递信息，确认快递信息后将不可修改
        </div>
         <div class="tip en" v-else>
            <i></i>Please fill in the courier information carefully and confirm that the courier information will not be modified.
        </div>
        <!-- 优惠买单按钮 -->
        <div v-if="lang=='zh' " class="btn-box" @click="confirm">确认发货</div>
        <div v-else class="btn-box" @click="confirm">Confirm delivery</div>
        <!-- 弹出快递公司选择 -->
        <van-popup v-model="show" position="bottom">
           <van-picker  show-toolbar :columns="columns" @confirm="onConfirm" @cancel="show = false" />
        </van-popup>
        <!-- loading -->
        <div class="loading-box" v-show="loading">
             <van-loading type="spinner" color="white" />
        </div>
    </div>
</template>
<script>
import {postSendExpress,} from '@/api/order/buy'
import {postSendExpress2,} from '@/api/order/exchange'
import {postmyExchangeExpress} from '@/api/my/myexchange'
import {getcompanyList,getPlatformAddress} from '@/api/public'
import { Loading,Toast, Popup ,Picker} from 'vant';

export default {
    name:'mySend',
    //声明组件
    components:{
        [Loading.name]:Loading,
        [Picker.name]:Picker,
        [Popup .name]:Popup,
        [Toast.name]:Toast,
     
    },
    data (){
        return{
           lang:'zh',//当前网页语言类型 zh 中文  en 英语  
           id:0,//当前订单id
           type:1,//选择商品类型 0 置换 1购买    2我的置换发货   
           data:{},//地址数据 
           userId:0,//用户id 
           show:false,//弹出层是否显示
           columns:[],//快递公司数据 
           company:{
               com:'',
               no:'',
           },//快递公司信息
           number:'',//快递单号
           radio:'3',//支付方式:1余额，2支付宝，3微信
           balance:0,//我的余额
           myBalance:'我的余额',//我的余额描述
           totalPrice:'',//购买的总价格
           loading:false,//加载提示框 是否显示(页面初始加载显示)
           isSelected:false,//是否选择了置换的商品
        
        }
    },
    //实例创建完成后被立即调用
    created (){
        //获得语言类型lang
        if(this.$route.query.lang) {
            this.lang = this.$route.query.lang;
            //获得平台收货地址
            this.getAddress();
        }
        //获取订单id
        if(this.$route.query.id && this.$route.query.id > 0){
            this.id = this.$route.query.id;
             //请求数据
             this.getAllData();
        }else{
            Toast('获得订单ID失败，请返回列表页重试'); 
            this.loading = false;
        }
        //获取用户id
        if(this.$route.query.userId && this.$route.query.userId > 0){
            this.userId = this.$route.query.userId;
             //把用户id存储在缓存
             window.localStorage.setItem("userId",this.userId);
        }else{
            this.userId = window.localStorage.getItem("userId");
        }
         //获取type
        this.type = this.$route.query.type;//根据type判断是购买还是置换
       
    },
    //
    methods:{
         //获得平台收货地址
        getAddress(){
            getPlatformAddress(this.lang).then(res => {
            console.log(res);
            if(res.code == 200){
                this.data = res.data;
            }else {
                Toast(res.msg);
            }
            }); 
        },
        //获得所有详情数据
        getAllData(){
            getcompanyList().then(res => {
            // console.log(res);
            if(res.resultcode == 200){
                let data = res.result;
              
                let newAry = [];
                data.forEach(element => {
                    let obj = {};
                    obj.text = element.com;
                    obj.no = element.no;
                    newAry.push(obj);
                });
                this.columns = newAry;
                this.loading = false;
                // console.log(this.columns);
            }else {
                Toast(res.msg);
            }
            }); 
        },
        //快递公司 确认
        onConfirm(value,index){
            // Toast(`当前索引：${index}`);
            //通过索引找到快递公司
            this.company.com = this.columns[index].text;
            this.company.no = this.columns[index].no;
            this.show = false;
            console.log(this.company);
        },
        //确认发货
        confirm(){
            //先判断
            if(this.company.com == '' || this.company.no==''){
                if(this.lang == 'zh'){
                    Toast("请选择快递公司");
                }else{
                    Toast("Please choose a courier company");
                }
                return false;
            }else if(this.number == ''){
               
                if(this.lang == 'zh'){
                    Toast("请输入快递单号");
                }else{
                    Toast("Please enter the courier number");
                }
                return false;
            }else{
                //加载中
                this.load = true;
                let param = {};
                param.orderId = this.id;
                param.expressCompany = this.company.com;
                param.expressKey = this.company.no;
                param.expressCode = this.number;
                param.lang = this.lang;
                if(this.type == 0){//置换
                    //置换交易   被置换方发货
                    postSendExpress2(param).then(res => {
                        if(res.code == 200){
                            //隐藏加载中
                            this.load = false;  
                            console.log(res);
                            let para = {};
                          
                            if(this.lang == 'zh'){
                                para.title = "发货成功";
                            }else{
                                para.title = "Delivery success";
                            }
                            para.url = "/orderSuccess?type=3&status=0&lang="+this.lang+"&userId="+this.userId;
                            this.interaction.hLink(para);
                        }else{
                            Toast(res.msg);
                        }
                        
                    }) 
                }else if(this.type == 1){
                    //卖家发货   购买交易
                    postSendExpress(param).then(res => {
                        if(res.code == 200){
                            //隐藏加载中
                            this.load = false;  
                            console.log(res);
                            let para = {};
                            if(this.lang == 'zh'){
                                para.title = "发货成功";
                            }else{
                                para.title = "Delivery success";
                            }
                            para.url = "/orderSuccess?type=3&status=1&lang="+this.lang+"&userId="+this.userId;
                            this.interaction.hLink(para)
                        }else{
                            Toast(res.msg);
                        }
                    }) 

                }else if(this.type == 2){
                    //我的置换置换方  买家  发货
                    postmyExchangeExpress(this.id,this.company.com,this.company.no,this.number,this.lang).then(res => {
                        if(res.code == 200){
                            //隐藏加载中
                            this.load = false;  
                            console.log(res);
                            let para = {};
                            if(this.lang == 'zh'){
                                para.title = "发货成功";
                            }else{
                                para.title = "Delivery success";
                            }
                            para.url = "/myorderSuccess?type=9&status=0&lang="+this.lang+"&userId="+this.userId;
                            this.interaction.hLink(para)
                        }else{
                            Toast(res.msg);
                        }
                    })
                }
            }    
        },
    }
    
}
</script>

<style lang="stylus" scoped>
.bepaid{
    height:100%;
}
// 订单顶部信息
.order-box{
   padding : .266667rem; 
   text-align :center;
   background :#fff;
   margin-bottom :.186667rem;
   img{
       width :3.76rem;
       margin-top :.133333rem;
       margin-bottom :.266667rem;
       &.en{
           width :4.2rem;
       }
   } 
   dl{
       dt{
            font-family:PingFangSC-Medium;
            font-size:.373333rem;
            color:#494949;
            text-align:left;
            line-height :.533333rem;
            margin-bottom :.186667rem;
       }
       dd{
           font-family:PingFangSC-Regular;
            font-size:.32rem;
            color:#9b9b9b;
            text-align:left;
            line-height :.4rem ;
       }
   } 
}
// 填写快递信息
.express{
    padding : .266667rem; 
    text-align :center;
    background :#fff;
    margin-bottom :.186667rem;
    img{
       width :3.76rem;
       margin-top :.133333rem;
       margin-bottom :.266667rem;
       &.en{
            width :4.2rem;
       }
    }
    p{
        font-family:PingFangSC-Regular;
        font-size:.32rem;
        color:#a2a2a2;
        letter-spacing:.004533rem;
        line-height :.453333rem;
        text-align:left;
    }
    // 快递公司
    .box{
        position:relative;
        .arow{
            height:.186667rem;
            width :auto;
            position:absolute;
            right :.24rem;
            top:50%;
            margin-top :-0.093333rem;
        }
    }
    .com{
        background:#f1f1f1;
        border-radius:100px;
        width:100%;
        height:.933333rem;
        margin-top :.266667rem;
        margin-bottom :.4rem;
        font-size:13px;
        padding :0 .266667rem;
        box-sizing :border-box;
      
        &::-webkit-input-placeholder {
          /* placeholder颜色  */
           color:#a2a2a2;
        }
    }
} 
//提示
.tip{
    padding :0 .266667rem  0 .746667rem;
    margin-top:.266667rem;
    position:relative;
    font-family:PingFangSC-Regular;
    font-size:.32rem;
    color:#a2a2a2;
    letter-spacing:.008rem;
    i{
      width :.32rem;
      height :.32rem;
      position :absolute;
      left :.266667rem;
      top:50%;
      margin-top :-0.16rem;
      background :url("http://img.xianyufanshen.net//order/images/tishi_woyaofahuo@2x.png") no-repeat;
      background-size :100%;  
    }
    &.en{
        i{
            top: 22%;
        }
    }
}  
// 底部操作按钮
.btn-box{
    position :fixed;
    left 0;
    bottom:0;
    opacity:0.9;
    width :100%;
    background:#ffffff;
    height:1.2rem;
    line-height :1.2rem;
    z-index: 999;
    text-align:center;
    font-family:PingFangSC-Medium;
    font-size:.4rem;
    color:#cb9c57;
    letter-spacing:.0056rem;
}
.loading-box{
    width :50px;
    height :50px;
    border-radius :3px;
    background :rgba(0,0,0,.5);
    position :fixed;
    left :50%;
    top:50%;
    margin-left:-25px;
    margin-top :-25px;
    z-index :999999;
    text-align :center;
    vertical-align :middle;
    .van-loading{
       left :50%;
       top:50%;
       margin-left :-15px;
       margin-top :-15px;
    }
}
</style>


